/**
 * Copyright (c) 2015 Bosch Software Innovations GmbH and others.
 *
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 */
// scss-lint:disable ImportantRule, PropertySortOrder
@mixin others {

  //Style to display the pending action count
  .unread,
  .error-count {
    @include valo-badge-style;
    position: absolute;
    pointer-events: none;
    display: block;
    top: round($v-unit-size / -5);
    right: round($v-unit-size / -5);
    z-index: 1;
    border-radius: $v-border-radius;
    color: $widget-bg;
  }

  .error-count {
    top: round($v-unit-size / -5);
    right: round($v-unit-size / 1.9);
  }

  .error-count-color {
    @include valo-gradient($color: $red-color);
  }

  //Deployment view - Style of count message
  .v-caption-count-msg-box {
    margin-left: 180px;
    color: $info-message-color-grey;
    font-weight: bold;
    height: 10px;
  }

  //*Deployment view -Assigned and installed message*
  .count-msg-box {
    margin-left: 180px;
    padding-top: 3px;
    color: $info-message-color-grey;
    font-weight: italic;
    font-size: 12px;
  }

  //Deployment view information message - Color of assigned count
  .assigned-count-message {
    color: $assigned-row-color;
  }

  //Deployment view information message - Color of installed count
  .installed-count-message {
    color: $installed-row-color;
  }

  //Create distribution twin table - Check box style
  .dist-checkbox-style {
    margin-left: 1px;
    position: relative;
    z-index: 1;
    font-size: 14px !important;
  }

  //Version displayed at bottom of menu *
  .version-layout {
    font-size: .8em !important;
    text-align: center;
  }

  //Pin style - when pinned and when row is not selected
  tr:not(.v-selected) .v-button-targetPinned:after {
    content: '\f08d';
    color: $hawkbit-primary-color;
  }

  //Pin style - when pinned and when row is selected
  tr.v-selected .v-button-targetPinned:after {
    content: '\f08d';
    color: $widget-bg;
  }

  //Pin style - when hovered on pin and when row is not selected
  tr:not(.v-selected) .v-button-targetStatusPinToggle:hover:after {
    background-color: $hawkbit-primary-color;
    color: $widget-bg !important;
  }

  //Pin style - when hovered on pin and when row is selected
  widget-bg .v-button-targetStatusPinToggle:hover:after {
    background-color: $widget-bg;
    color: $hawkbit-primary-color !important;
  }

  //Toggle between pin and status icon
  .v-button-targetStatusPinToggle:after {
    font-family: FontAwesome;
  }

  .statusIconRed {
    color: $signal-red-color;
  }

  .statusIconBlue {
    color: $status-unknown-color;
  }

  .statusIconYellow {
    color: $signal-yellow-color;
  }

  .statusIconGreen {
    color: $signal-green-color;
  }

  .statusIconLightBlue {
    color: $signal-light-blue-color;
  }

  // pending status label not selected
  tr:not(.v-selected) .statusIconForced:after {
    color: $hawkbit-primary-color;
  }

  // pending status label selected
  tr.v-selected .statusIconForced:after {
    color: $widget-bg;
  }

  // pending status label not selected
  tr:not(.v-selected) .statusIconPending:after {
    color: $hawkbit-primary-color;
  }

  // pending status label selected
  tr.v-selected .statusIconPending:after {
    color: $widget-bg;
  }

  // active status label not selected
  tr:not(.v-grid-row-selected) .statusIconActive {
    @include valo-spinner($size:16px, $speed:1200ms);
    color: $hawkbit-primary-color;
  }

  // active status label selected
  tr.v-grid-row-selected .statusIconActive {
    @include valo-spinner($size:16px, $speed:1200ms, $color: $grey-light);
    color: $grey-light;
  }

  // neutral status label not selected
  tr:not(.v-selected) .statusIconNeutral:after {
    color: $hawkbit-primary-color;
  }

  // neutral status label selected
  tr.v-selected .statusIconNeutral:after {
    color: $widget-bg;
  }

  // red status label not selected
  tr:not(.v-selected) .borderless.statusIconRed:after {
    color: $hawkbit-primary-color;
    content: '';
  }

  // red status label not selected
  tr.v-selected .borderless.statusIconRed:after {
    color: $widget-bg;
    content: '';
  }

  .redSpinner {
    @include valo-spinner($size: $v-font-size--small, $color: $red-color);
    pointer-events: auto !important;
  }

  .greySpinner {
    @include valo-spinner($size: $v-font-size--small, $color: $grey-color);
    pointer-events: auto !important;
  }

  .yellowSpinner {
    @include valo-spinner($size: $v-font-size--small, $color: $signal-yellow-color);
    pointer-events: auto !important;
  }

  .blueSpinner {
    @include valo-spinner($size: $v-font-size--small, $color: $signal-light-blue-color);
    pointer-events: auto !important;
  }

  // Disabled row style when distribution is incomplete
  .v-grid-row.incomplete-distribution,
  .v-grid-row.incomplete-distribution>.v-grid-cell {
    color: $disabled-row-color-grey !important;
  }
  
   // Disabled row/cell style when distribution is invalid
  .v-grid-row.invalid-distribution,
  .v-grid-row.invalid-distribution>.v-grid-cell,
  td.v-grid-cell.invalid-distribution {
    color: $disabled-row-color-grey !important;    
    text-decoration: line-through !important;
  }

  .v-link {
    text-decoration: none;
    padding-right: 10px;
    font-weight: 300;
  }

  .v-tooltip {
    max-width: 43em;
  }

  .breadcrumbPaddingLeft {
    padding-left: 3px !important;
  }

  .app-loading {
    background-position: bottom;
    background-repeat: no-repeat;
  }

  .app-loading:before {
    background: none;
    height: 20px !important;
    width: 20px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid rgba(0, 0, 0, 0);
    border-top-color: $hawkbit-primary-color;
    border-right-color: $hawkbit-primary-color;
    border-radius: 100%;
    -webkit-animation: v-rotate-360 500ms infinite linear;
    -moz-animation: v-rotate-360 500ms infinite linear;
    -ms-animation: v-rotate-360 500ms infinite linear;
    -o-animation: v-rotate-360 500ms infinite linear;
    animation: v-rotate-360 500ms infinite linear;
    pointer-events: none;
    position: fixed;
    margin-top: 12px;
    margin-left: -10px;
  }

  .bulk-upload-loading:before {
    background: none;
    height: 18px !important;
    width: 18px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top-color: #551f62;
    border-right-color: #551f62;
    border-radius: 100%;
    -webkit-animation: v-rotate-360 500ms infinite linear;
    -moz-animation: v-rotate-360 500ms infinite linear;
    -ms-animation: v-rotate-360 500ms infinite linear;
    -o-animation: v-rotate-360 500ms infinite linear;
    animation: v-rotate-360 500ms infinite linear;
    pointer-events: none;
  }

  .rotate-widget-90-deg .v-widget .v-icon{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  .disable-horizontal-scroll {
    overflow-x: hidden;
  }

  .enable-horizontal-scroll {
    overflow-x: auto;
  }
}